<template>
  <div class="report-form">
    <div class="report-form-content">
      <div class="report-form-content-title">
        <h1 style="font-weight: bold" v-if="oper === 'add'">新增报账初始化数据</h1>
        <h1 style="font-weight: bold" v-if="oper === 'edit'">编辑报账初始化数据</h1>
        <h1 style="font-weight: bold" v-if="oper === 'view'">查看报账初始化数据</h1>
      </div>
      <el-form class="my-form" ref="obj" :model="obj" :rules="rules" label-position="right" label-width="auto" label-suffix="：" :disabled="oper === 'view'">
        <div style="text-align: right;">
          <div class="tabs-list">
            <el-button type="primary" @click="handleSave('obj')">
              <svg-icon icon-class="save" />
              保存
            </el-button>
          </div>
        </div>
        <div class="tabs-list">
          <el-row :gutter="20">
            <el-col :sm="24" :lg="24" style="padding-left: 20px">
              <el-card class="update-log">
                <div class="report-form-list-content">
                  <el-form-item label="指标编码">
                    <span>{{ expenditureKpiObj.kpiCode }}</span>
                  </el-form-item>
                  <el-form-item label="指标名称">
                    <span>{{ expenditureKpiObj.kpiName }}</span>
                  </el-form-item>
                  <el-form-item label="可用金额">
                    <span v-if="expenditureKpiObj.kpiCode">￥{{ expenditureKpiObj.availableAmount }}</span>
                  </el-form-item>
                </div>
                <div class="report-form-list-content">
                  <el-form-item prop="expenditureKpiId">
                    <el-button type="primary" icon="search" @click="chooseExpenditureKpi">选择指标单</el-button>
                  </el-form-item>
                  <el-popover placement="bottom" :width="600" trigger="click">
                    <template #reference>
                      <el-button class="content-de" :disabled="!expenditureKpiObj.id"><svg-icon icon-class="view" />查看详情</el-button>
                    </template>
                    <div class="report-form-list-content report-form-list-content-be">
                      <el-form-item label="预算年度">
                        <span>{{ expenditureKpiObj.year }}</span>
                      </el-form-item>
                      <el-form-item label="支出类型">
                        <span>
                          <DictTag :dict-list="getDictList('ExpenditureKpiPayType')" :dict-key="expenditureKpiObj.payType" />
                        </span>
                      </el-form-item>
                      <el-form-item label="经费类型">
                        <span>
                          <DictTag :dict-list="getDictList('ExpenditureKpiFundType')" :dict-key="expenditureKpiObj.fundType" />
                        </span>
                      </el-form-item>
                      <el-form-item label="预算总金额">
                        <MoneyTag :money="expenditureKpiObj.amount" />
                      </el-form-item>
                      <el-form-item label="可用金额">
                        <MoneyTag :money="expenditureKpiObj.availableAmount" />
                      </el-form-item>
                      <el-form-item label="项目负责人部门">
                        <span>
                          <LabelTag :foreignList="organizationList" :foreignIds="expenditureKpiObj.organizationId" :foreignLabel="'organizationName'" />
                        </span>
                      </el-form-item>
                      <el-form-item label="项目负责人">
                        <span>
                          <LabelTag :foreignList="userList" :foreignIds="expenditureKpiObj.managerId" :foreignLabel="'name'" />
                        </span>
                      </el-form-item>
                      <el-form-item label="功能分类">
                        <span>
                          <LabelTag :foreignList="expenditureFunctionalList" :foreignIds="expenditureKpiObj.expenditureFunctionalId" :foreignLabel="'name'" />
                        </span>
                      </el-form-item>
                      <el-form-item label="财政项目">
                        <span>
                          <LabelTag :foreignList="expenditureFiscalList" :foreignIds="expenditureKpiObj.expenditureFiscalId" :foreignLabel="'name'" />
                        </span>
                      </el-form-item>
                      <el-form-item label="指标来源">
                        <span>
                          <DictTag :dict-list="getDictList('ExpenditureKpiSource')" :dict-key="expenditureKpiObj.source" />
                        </span>
                      </el-form-item>
                      <el-form-item label="项目类型">
                        <span>
                          <LabelTag :foreignList="expenditurePtypeList" :foreignIds="expenditureKpiObj.expenditurePtypeId" :foreignLabel="'name'" />
                        </span>
                      </el-form-item>
                      <el-form-item label="指标单状态">
                        <span>
                          <EnumTag :enum-list="getEnumList('ExpenditureKpiState')" :enum-key="expenditureKpiObj.state" />
                        </span>
                      </el-form-item>
                      <el-form-item label="按经济分类控制金额">
                        <span>
                          <EnumTag :enum-list="getEnumList('CommonYesNo')" :enum-key="expenditureKpiObj.isEconomic" />
                        </span>
                      </el-form-item>
                    </div>
                  </el-popover>
                </div>
              </el-card>
            </el-col>
            <el-col :sm="24" :lg="24" style="padding-left: 20px">
              <el-card class="update-log">
                <div class="report-form-list-content">
                  <el-form-item label="报账单编码" prop="reimbursementCode">
                    <el-input v-model="obj.reimbursementCode" placeholder="请输入报账单编码" />
                  </el-form-item>
                  <el-form-item label="日期" prop="reimbursementDate">
                    <el-date-picker v-model="obj.reimbursementDate" type="date" placeholder="请选择" value-format="YYYY-MM-DD" />
                  </el-form-item>
                  <el-form-item label="预算指标名称" prop="kpi">
                    <el-input v-model="obj.kpi" placeholder="请输入预算指标名称" />
                  </el-form-item>
                  <el-form-item label="会计科目" prop="expenditureSubjectId">
                    <el-cascader v-model="obj.expenditureSubjectId" :options="arrChangeTreeFn(expenditureSubjectList)" :props="{label: 'name', value: 'id'}" :show-all-levels="false" clearable filterable />
                  </el-form-item>
                  <el-form-item label="填单人部门" prop="submitOrganizationId">
                    <Organization v-model="obj.submitOrganizationId" keyName="id" keyShow="organizationName" placeholder="申请人部门" title="部门查询" />
                  </el-form-item>
                  <el-form-item label="填单人用户" prop="submitUserId">
                    <User v-model="obj.submitUserId" keyName="id" keyShow="name" placeholder="填单人用户" title="用户查询" />
                  </el-form-item>
                  <el-form-item label="已报金额" prop="amount">
                    <el-input-number v-model="obj.amount" placeholder="请输入已报金额" :min="0" :precision="2" />
                  </el-form-item>
                </div>
                <div class="report-form-list-content-1">
                  <el-form-item label="摘要" prop="summary">
                    <el-input v-model="obj.summary" :autosize="{ minRows: 2, maxRows: 5}" type="textarea" class="textarea-1" />
                  </el-form-item>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </div>
    <selectExpenditureKpiList v-model:itemsVisible="itemsVisible" @close="itemsVisible = false" @expenditureKpiSelect="changeExpenditureKpi"></selectExpenditureKpiList>
  </div>
</template>

<script>
import baseConfig from '@/mixins/baseConfig'
import {doGet, doPost, doPut} from '@/config/http'
import {alertErrorMsg, arrChangeTreeFn, customValidator, getListPageSize, notifySuccess} from "@/config/common";
import selectExpenditureKpiList from '@/views/components/expenditure/selectExpenditureKpiList.vue'
import useUserStore from "@/store/modules/user";
import {getUserId} from "@/config/cookie";
import {parseTime} from "@/utils/ruoyi";
import SvgIcon from "@/components/SvgIcon/index.vue";
import User from "@/views/components/base/selectUser.vue";
import Organization from "@/views/components/base/selectOrganization.vue";
import initListStore from '@/store/modules/initList'

const emptyObj = {
  expenditureKpiId: null, // 指标单ID
  reimbursementCode: null, // 报账单编码
  reimbursementDate: parseTime(new Date().getTime(), '{y}-{m}-{d}'), // 日期
  kpi: null, // 预算指标
  expenditureSubjectId: null, // 会计科目ID
  submitOrganizationId: useUserStore().organization.id, // 组织架构(部门)ID
  submitUserId: getUserId(), // 用户ID
  amount: 0, // 已报金额
  summary: null, // 摘要
  id: null,
  createBy: null,
  createTime: null,
  updateBy: null,
  updateTime: null,
  deleted: null,
  version: null,
}

export default {
  name: 'expenditureInitReimbursementEdit_nocache',
  mixins: [baseConfig],
  components: {
    Organization,
    User,
    SvgIcon,
    selectExpenditureKpiList
  },
  data() {
    return {
      svc: 'icims-api',
      obj: Object.assign({}, emptyObj),
      routes: [],
      oper: null,
      dialogVisible: false,
      checkStrictly: false,
      radio1: '1',
      radio2: '已保存',
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      activeName: '1',
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: false,
      hasChildren: false,
      children: [],
      catalogProjectList: [],
      kpiListAll: [],
      kpiListCurrent: [],
      selectionList: [],
      dialogFormVisible: false,
      itemsVisible: false,
      dialogStatus: '',
      rules: {
        expenditureKpiId: [{ required: true, validator: customValidator, min: 0, max: 100, label: '指标单', trigger: ['blur', 'change'] }],
        reimbursementCode: [{ required: true, validator: customValidator, min: 0, max: 20, label: '报账单编码', trigger: ['blur', 'change'] }],
        reimbursementDate: [{ required: true, validator: customValidator, min: 0, max: 20, label: '日期', trigger: ['blur', 'change'] }],
        kpi: [{ required: true, validator: customValidator, min: 0, max: 200, label: '预算指标', trigger: ['blur', 'change'] }],
        expenditureSubjectId: [{ required: true, validator: customValidator, min: 0, max: 200, label: '会计科目ID', trigger: ['blur', 'change'] }],
        amount: [{ required: true, validator: customValidator, min: 0, max: 13, label: '已报金额', trigger: ['blur', 'change'] }],
        summary: [{ required: false, validator: customValidator, min: 0, max: 0, label: '摘要', trigger: ['blur', 'change'] }],
      },
      governmentList: initListStore().governmentList,
      organizationList: initListStore().organizationList,
      userList: initListStore().userList,
      expenditurePtypeList: initListStore().expenditurePtypeList,//项目类型
      expenditureFunctionalList: initListStore().expenditureFunctionalList,//功能分类
      expenditureEconomicList:initListStore().expenditureEconomicList,//经济分类
      expenditureFiscalList: initListStore().expenditureFiscalList,//财政项目
      expenditureSubjectList: initListStore().expenditureSubjectList,//会计科目
      isShowAttPreViewVisible: false,
      expenditureKpiObj: {
        kpiCode: null, // 指标编码
        kpiName: null, // 指标名称
        kpiDate: null, // 单据日期
        year: null, // 预算年度
        payType: null, // 支出类型
        fundType: null, // 经费类型
        amount: null, // 预算总金额
        organizationId: null, // 部门ID
        managerId: null, // 项目负责人
        expenditurePtypeId: null, // 项目类型ID
        expenditureFunctionalId: null, // 功能分类ID
        expenditureFiscalId: null, // 财政项目ID
        source: null, // 指标来源
        state: null, // 状态
        isEconomic: null, // 按经济分类控制金额
      },
    }
  },
  computed: {
    routesData() {
      return this.routes
    },
  },
  created() {
    this.initObj()
    // this.initList()
  },
  methods: {
    arrChangeTreeFn,
    // async initList() {
    //   let p1 = doGet(this.svc, '/government/page', {pageSize: getListPageSize()}, false)
    //   let p2 = doGet(this.svc, '/organization/page', {pageSize: getListPageSize()}, false)
    //   let p3 = doGet(this.svc, '/user/page', {pageSize: getListPageSize()}, false)
    //   let p4 = doGet(this.svc, '/expenditure-ptype/page', {pageSize: getListPageSize()}, false)
    //   let p5 = doGet(this.svc, '/expenditure-functional/page', {pageSize: getListPageSize()}, false)
    //   let p6 = doGet(this.svc, '/expenditure-economic/page', {pageSize: getListPageSize()}, false)
    //   let p7 = doGet(this.svc, '/expenditure-fiscal/page', {pageSize: getListPageSize()}, false)
    //   let p8 = doGet(this.svc, '/expenditure-subject/page', {pageSize: getListPageSize()}, false)
    //   let resArray = await Promise.all([p1, p2, p3, p4, p5, p6, p7, p8])
    //   this.governmentList = resArray[0]['records']
    //   this.organizationList = resArray[1]['records']
    //   this.userList = resArray[2]['records']
    //   this.expenditurePtypeList = resArray[3]['records']
    //   this.expenditureFunctionalList = resArray[4]['records']
    //   this.expenditureEconomicList = resArray[5]['records']
    //   this.expenditureFiscalList = resArray[6]['records']
    //   this.expenditureSubjectList = resArray[7]['records']
    // },
    async initObj() {
      this.oper = this.$route.query.oper
      this.id = null
      if (this.$route.query.id) {
        this.id = this.$route.query.id
        this.obj = await doGet(this.svc, '/expenditure-init-reimbursement/' + this.id, {}, true)
        this.obj.expenditureSubjectId = this.obj.expenditureSubjectId?.split(',')
        if (this.obj.expenditureKpiId) {
          this.expenditureKpiObj = await doGet(this.svc, '/expenditure-kpi/' + this.obj.expenditureKpiId, {}, false)
        }
      }
    },
    chooseExpenditureKpi() {
      this.itemsVisible = true
    },
    changeExpenditureKpi(data) {
      this.expenditureKpiObj = data
      this.obj.expenditureKpiId = data.id
      this.obj.kpi = this.expenditureKpiObj.kpiName
    },
    async handleSave(formName) {
      let v = await this.$refs[formName].validate().catch((err)=>{return err})
      if (v !== true) {
        alertErrorMsg('表单验证不通过，请检查数据。')
        return
      }
      this.obj.expenditureSubjectId = this.obj.expenditureSubjectId instanceof Array ? this.obj.expenditureSubjectId.join(',') : this.obj.expenditureSubjectId
      if (this.oper === 'edit') {
        doPut(this.svc, '/expenditure-init-reimbursement/modify', this.obj).then(() => {
          notifySuccess('修改成功')
          this.goTargetByName('expenditureInitReimbursement', {}, true)
          this.dialogVisible = false
        })
      } else if (this.oper === 'add') {
        doPost(this.svc, '/expenditure-init-reimbursement/add', this.obj).then(() => {
          notifySuccess('新增成功')
          this.goTargetByName('expenditureInitReimbursement', {}, true)
          this.dialogVisible = false
        })
      }
    },
  }
}
</script>
<style scoped>
.report-form {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: #fff;
  z-index: 10;
  padding: 20px;
  overflow-x: hidden;
  overflow-y: auto;
}
.report-form-content-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.form-label {
  display: inline-flex;
  justify-content: flex-end;
  align-items: flex-start;
  flex: 0 0 auto;
  /* font-size: var(--el-form-label-font-size); */
  font-size: 16px;
  /* color: var(--el-text-color-regular); */
  color: #337ecc;
  height: 32px;
  line-height: 32px;
  padding: 0 12px 0 0;
  box-sizing: border-box;
  width: 200px;
  font-weight: bold;
}
.update-log {
  width: 100%;
  margin: 30px 0;
}
.update-log-1 {
  margin-top: 0;
}
.select-list {
  width: 100%;
  margin: 30px 0;
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
}
.select-list .el-radio-group {
  margin-right: 30px;
}
.select-list .el-button {
  margin-left: 30px;
}
.add-indexs {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.content-de {
  /* padding-left: 20px;
  padding-top: 4px; */
  margin-left: 20px;
}
.upload-demo {
  width: 700px;
}
</style>
